<template>
  <div class="card bg-#fff p-32px" v-loading="loading">
    <div class="flex items-center mb-16px">
      <h2 class="font-size-24px fw-500 mr-22px">
        {{ props.data.supplyTitle }}
      </h2>
      <span
        class="font-size-12px text-#fff lh-16px py-3px px-10px border-rd-2px"
        :style="tagBgStyle"
        >{{ tagName }}</span
      >
    </div>
    <div class="font-size-14px text-light">
      <span class="mr-35px"
        >发布时间：{{ props.data.createTime?.slice(0, 10) }}</span
      >
      <span class="mr-35px"
        >发布地点：{{ props.data?.provinceName }}
        {{ props.data?.cityName }}</span
      >
<!--      <span class="mr-35px">发布人：{{ props.data?.createBy }}</span>-->
      <span class="mr-35px"
        >公司名：{{
          props.data?.supplyUserInfo?.companyName || "-"
        }}</span
      >
      <span class="mr-35px">节点名：{{ props.data?.supplyNodeName || '算力圈' }}</span>
    </div>
    <div class="mt-40px">
      <h5 class="font-size-18px fw-500 mb-24px">资源信息</h5>
      <div class="content-inner">
        <div>
          <label>资源描述：</label>
          <div v-html="formattedParamDesc"></div>
        </div>
        <template v-if="props.data.supplyType === 1">
          <div>
            <label>供电方式：</label>
            <div>
              <dictName :value="props.data.framePowerWay" code="power_way" />
            </div>
          </div>
          <div>
            <label>供电功率：</label>
            <div>{{ props.data.framePower }}</div>
          </div>
          <div>
            <label>机柜高度：</label>
            <div>{{ props.data.frameHeight }}</div>
          </div>
          <div>
            <label>可租数量：</label>
            <div>{{ props.data.supplyNum }}</div>
          </div>
          <div>
            <label>单价：</label>
            <div @click="handleLoginClick">
              <span :class="{ 'blue-text': !isLoggedIn }">
                     {{ isLoggedIn ? `￥${ props.data.framePrice || ''} ${props.data.priceUnit || '个'}` : '登录后查看' }}
              </span>
            </div>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 2">
          <div>
            <label>运营商：</label>
            <div>
              <dictName :value="props.data.bwOperator" code="operator" />
            </div>
          </div>
          <div>
            <label>路由类型：</label>
            <div>
              <dictName :value="props.data.bwRouteType" code="route_type" />
            </div>
          </div>
          <div>
            <label>带宽单价：</label>
            <div @click="handleLoginClick">
              <span :class="{ 'blue-text': !isLoggedIn }">
              {{ isLoggedIn ? `￥${ props.data.bwBandwidthPrice || ''} ${props.data.priceUnit || '个'}` : '登录后查看' }}
              </span>
            </div>
          </div>
          <div>
            <label>带宽可租数量(个)：</label>
            <div>{{ props.data.bwBandwidthNum }}</div>
          </div>
          <div>
            <label>IP可租数量(个)：</label>
            <div>{{ props.data.bwIpNum }}个</div>
          </div>
          <div>
            <label>IP单价：</label>
            <div @click="handleLoginClick">
              <span :class="{ 'blue-text': !isLoggedIn }">
              {{ isLoggedIn ? `￥${ props.data.bwIpPrice || ''} ${props.data.priceUnit || '个'}` : '登录后查看' }}
              </span>
            </div>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 4">
          <div>
            <label>计算资源：</label>
            <div>
              <dictName
                :value="props.data.gpuResource"
                code="gpu_resource_type"
              />
            </div>
          </div>
          <div>
            <label>网络架构：</label>
            <div>{{ props.data.gpuNet }}</div>
          </div>
          <div>
            <label>可租算力(PFLOPS)：</label>
            <div>{{ props.data.gpuApplyPflops }}</div>
          </div>
          <div>
            <label>计费模式：</label>
            <div>
              {{ GPU_ABILITY_TYPE_ENUM[props.data.gpuAbilityType] }}
            </div>
          </div>
          <div>
            <label>适用场景：</label>
            <div>{{ props.data.gpuOccasion }}</div>
          </div>
          <div>
            <label>拥有数量：</label>
            <div>{{ props.data.gpuNum }}</div>
          </div>
          <div>
            <label>单价：</label>
            <div @click="handleLoginClick">
              <span :class="{ 'blue-text': !isLoggedIn }">
              {{ isLoggedIn ? `￥${ props.data.gpuPrice|| ''} ${props.data.priceUnit || '个'}` : '登录后查看' }}
              </span>
            </div>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 5">
          <div class="content">
            <div class="left">
              <div class="content-inner">
                <div>
                  <label>企业：</label>
                  <div>{{ data.companyName || '算力圈' }}</div>
                </div>
                <div>
                  <label>联系人：</label>
                  <div>{{ data.contactUser }}</div>
                </div>
                <div>
                  <label>联系电话：</label>
                  <div @click="handleLoginClick">
                    <span :class="{ 'blue-text': !isLoggedIn }">
                      {{ isLoggedIn ? data.contactUserMobile : '登录后查看' }}
                    </span>
                  </div>
                </div>
                <div >
                  <label>货源性质：</label>
                  <div>
                    <template v-if="data.goodsType === 1">
                      现货
                    </template>
                    <template v-else-if="data.goodsType === 2">
                      期货
                    </template>
                  </div>
                </div>
                <div v-if="data.goodsType === 1" >
                  <label>信息过期时间：</label>
                  <div>{{ data.expireTime }}</div>
                </div>
                <div v-if="data.goodsType === 2" >
                  <label>到货时间：</label>
                  <div>{{ data.arriveTime }}</div>

                </div>
                <div v-if="data.goodsType === 2" >

                  <label>批次量：</label>
                  <div>{{ data.batchNum }}</div>
                </div>
                <div>
                  <label>配置参数：</label>
                  <div v-html="formattedParamDesc"></div>
                </div>
                <div>
                  <label>交货地点：</label>
                  <div>{{ data.goodsAddress }}</div>
                </div>
                <div>
                  <label>单价：</label>
                  <div @click="handleLoginClick">
                      <span :class="{ 'blue-text': !isLoggedIn }">
              {{ isLoggedIn ? `￥${props.data.goodsPrice || ''} ${props.data.priceUnit || '个'}` : '登录后查看' }}
                      </span>
                  </div>
                </div>
                <div>
                  <label>销售数量：</label>
                  <div>{{ data.goodsNumber }} /{{props.data.priceUnit  || '个'}}</div>
                </div>
              </div>
            </div>
            <div class="right">
              <img v-if="data.infoPicUrl" :src="data.infoPicUrl" alt="信息大图" class="info-image" />
            </div>
          </div>
        </template>
      </div>
      <router-link
        v-if="showApplyBtn"
        :to="{ name: 'SupplyApply', query: { id: props.data.id } }"
      >
        <router-link
            v-if="showApplyBtn"
            :to="{ name: 'SupplyApply', query: { id: props.data.id, supplyType: props.data.supplyType } }"
        >
          <el-button
              type="primary"
              class="h-40px w-104px b-rd-2px mt-24px"
              @click="doSaveSupplyInfo"
          >申请合作</el-button>
        </router-link>

      </router-link>
    </div>
  </div>
</template>

<script setup>
import {
  SOURCE_TYPE_ENUM,
  SOURCE_TYPE_TAG_COLOR_ENUM,
  GPU_ABILITY_TYPE_ENUM,
} from "@/const";
import { useUserStore } from "@/store";
import {useRoute, useRouter} from "vue-router";
import {computed} from "vue";
const route = useRoute();
const router = useRouter();
const isLoggedIn = computed(() => !!userStore.userInfo);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const userStore = useUserStore();
const showApplyBtn = computed(
  () =>
    userStore.userInfo?.userId &&
    props.data.createUserId !== userStore.userInfo?.userId
);

const tagName = computed(() => SOURCE_TYPE_ENUM[props.data.supplyType]);
const tagBgStyle = computed(() => ({
  background: SOURCE_TYPE_TAG_COLOR_ENUM[props.data.supplyType],
}));
const formattedParamDesc = computed(() => {
  return props.data.supplyDesc ? props.data.supplyDesc.replace(/\n/g, '<br/>') : '';
});
const doSaveSupplyInfo = () => {
  const { contactUser, contactUserMobile } = props.data;
  const info = {
    contactUser,
    contactUserMobile,
  };
  sessionStorage.setItem("applySupplyInfo", JSON.stringify(info));
};
const handleLoginClick = () => {
  if (!isLoggedIn.value) {
    goLogin();
  }
};
const goLogin = () => {
  router.push({
    name: "Login",
    query: {
      redirect: route.fullPath,
    },
    replace: true,
  });
};
</script>
<style scoped>
.page-top {
  background: url("/supply-detail-bg.png") no-repeat center;
  background-size: cover;
}
.layout-page-inner {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.content-top {
  display: flex;
  margin-bottom: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}
.top-item {
  font-size: 16px;
  color: #333;
}
.divider {
  border: none;
  border-top: 1px solid #ddd;
  margin-bottom: 16px;
}
.content {
  display: flex;
  justify-content: space-between;
}
.left, .right {
  flex: 1;
}
.content-inner {
  font-size: 14px;
  > div {
    line-height: 20px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    > label {
      color: #a5a9ad;
      width: 120px;
    }
    > div {
      color: #333;
      width: 500px;
      height: auto;
    }
  }
}
.info-image {
  width: 300px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.not-logged-in {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.login-prompt {
  font-size: 18px;
  color: blue;
}

.blue-text {
  color: blue; /* 蓝色文本 */
}
</style>